<!DOCTYPE html>
<html>

	<head>
		<title>牛小牛</title>
		<meta charset="UTF-8">
		<meta http-equiv="x-ua-compatible" content="IE=Edge, chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
		<link type="favicon" rel="shortcut icon" href="favicon.ico" />
		<link href="plugin/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
		<link href="css/main.css" rel="stylesheet" type="text/css">
		<link href="css/aside.css" rel="stylesheet" type="text/css">
		<link href="css/theme.css" rel="stylesheet" type="text/css">
		<script type="text/jscript" src="plugin/jquery/jquery.min.js"></script>
		<script type="text/jscript" src="plugin/bootstrap/js/bootstrap.min.js"></script>
		<script type="text/jscript" src="./js/myModule.js"></script>
		<!--[if lt IE 9]>
         <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
         <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
      	<![endif]-->
	</head>

	<body class="">
		<input id="switchAsideUser" class="switchAsideUser" type="radio" name="switchAside" />
		<input id="switchAsideSkin" class="switchAsideSkin" type="radio" name="switchAside" />
		<input id="switchAsideCarousel" class="switchAsideCarousel" type="radio" name="switchAside" />
		<input id="switchAsideShare" class="switchAsideShare" type="radio" name="switchAside" />
		<input id="switchAsideSet" class="switchAsideSet" type="radio" name="switchAside" />
		<input id="hideAside" type="radio" name="switchAside" />
		<aside class="aside">
			<div class="aside-list">
				<label for="switchAsideUser"><i class="glyphicon glyphicon-user"></i></label>
				<label for="switchAsideSkin"><i class="glyphicon glyphicon-signal"></i></label>
				<label for="switchAsideShare"><i class="glyphicon glyphicon-send"></i></label>
				<label for="switchAsideSet"><i class="glyphicon glyphicon-cog"></i></span></label>
				<label for="hideAside"><i class="glyphicon glyphicon-circle-arrow-left"></i></label>		
			</div>
			<div class="aside-content">
				<!--介绍-->
				<div class="content-item user">
					<div class="item-header">个人介绍</div>	
					<div class="item-inner text-center">
						<img src="./img/user.jpg" class="img-circle img-user">
						<h3>牛奇</h3>
						<h5>前端工作者</h5>
						<h5>458462463@qq.com</h5>
						<img class="img-ewm" src="img/ewm.jpg" />
						<img class="img-ewm" src="img/jiakao.jpg" />
					</div>					
				</div>
				<!--技能-->
				<div class="content-item skin">
					<div class="item-header">技能</div>	
					<div id="skill" class="item-inner skill-content">
						<h4>Javascript</h4>
						<div class="progress progress-striped">
						    <div class="progress-bar progress-bar-success active" role="progressbar"
						         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
						    </div>
						</div>
						<h4>HTML5</h4>
						<div class="progress progress-striped">
						    <div class="progress-bar progress-bar-success active" role="progressbar"
						         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
						    </div>
						</div>
						<h4>CSS3</h4>
						<div class="progress progress-striped">
						    <div class="progress-bar progress-bar-success active" role="progressbar"
						         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
						    </div>
						</div>
						<h4>Jquery</h4>
						<div class="progress progress-striped">
						    <div class="progress-bar progress-bar-warning active" role="progressbar"
						         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
						    </div>
						</div>
						<h4>Bootstrap</h4>
						<div class="progress progress-striped">
						    <div class="progress-bar progress-bar-warning active" role="progressbar"
						         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
						    </div>
						</div>
						<h4>Vue</h4>
						<div class="progress progress-striped">
						    <div class="progress-bar progress-bar-info active" role="progressbar"
						         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
						    </div>
						</div>
						<h4>微信小程序</h4>
						<div class="progress progress-striped">
						    <div class="progress-bar progress-bar-info active" role="progressbar"
						         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
						    </div>
						</div>
					</div>
				</div>
				<!--分享-->
				<div class="content-item share">
					<div class="item-header">分享</div>	
					<div class="item-inner">
						<div class="share-block">					
							<a class="block-inner" href="http://connect.qq.com/widget/shareqq/index.html?title=qqhaoyou&url=http://web_niuqi.gitee.io" target="_blank">
								<img class="img-share" src="./img/qq.svg" alt="qq"/>
							</a>
						</div>
						<div class="share-block">
							<a class="block-inner" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://web_niuqi.gitee.io" target="_blank">
								<img class="img-share" src="./img/qqkj.svg" alt="qq空间"/>
							</a>
						</div>					
						<div class="share-block">
							<a class="block-inner" href="http://v.t.sina.com.cn/share/share.php?url=http://web_niuqi.gitee.io/" target="_blank">
								<img class="img-share" src="./img/wb.svg" alt="新浪微博"/>
							</a>
						</div>
						<div class="share-block">
							<a class="block-inner" href="https://gitee.com/web_niuqi/web_niuqi.git" target="_blank">
								<img class="img-share" src="./img/download.svg" alt="下载源码"/>
							</a>
						</div>
					</div>
				</div>
				<!--主题设置-->
				<div id="contentSet" class="content-item set">
					<div class="item-header">主题</div>	
					<div id="theme" class="item-inner"></div>
					<div></div>
				</div>
			</div>
		</aside>
		<div class="main">
			<div class="main-content">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-10 col-md-offset-1 demo-content">
							<div id="demoList" class="col-md-8 demo-list"></div>
							<div id="demoHistory" class="col-md-4 demo-history hidden-sm hidden-xs">
								<div class="item">
									<h3>浏览历史</h3>
									<div id="history" class="item-body clearfix"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		    <div class="modal-dialog modal-lg">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                <h4 class="modal-title" id="myModalLabel"></h4>
		            </div>
		            <div class="modal-body">
		            	<div id="loading" class="loading"></div>
		            	<iframe id="demoIframe" class="demo-iframe"></iframe>
		            </div>
		        </div>
		    </div>
		</div>
		<script>
			$(function(){
				/*加载首页更换主题模块*/
				new myModule.ChangeTheme({
					id:'#theme',
					url:'./json/theme.json'
				});	
				/*加载首页显示区域demo列表*/
				new myModule.getDemoList({
					id:'#demoList',
					url:'./json/demo.json'
				});	
				
				/*切换模态框显示内容及浏览历史显示内容*/
				var demoUrl = '',demoTitle = '';
				$("body").on("click","a[data-url]",function(){
					demoUrl = $(this).attr("data-url");
					demoTitle = $(this).text();
					$("#myModalLabel").html(demoTitle);
					$("#myModal").modal("show");
				})
				$("#demoIframe").on("load",function(){
					$("#loading").hide();
				})
				$('#myModal').on('shown.bs.modal', function () {
					if(demoUrl != $("#demoIframe").attr("src")){
						$("#demoIframe").attr("src",demoUrl);
						$("#history").append('<a data-url="'+demoUrl+'">'+demoTitle+'</a>');
					}else{
						$("#loading").hide();
					}
				});
				$('#myModal').on('hidden.bs.modal', function () {
					$("#loading").show();
				});
			
			})
		</script>
	</body>

</html>